<!doctype html>
<html>

<head>
	<meta charset="utf-8" />
	<title>Your Application Name</title>
	<meta name="viewport" content="width=device-width, init-scale=1;">
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 先引入 Vue -->
	<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
		.abc button {
			color: yellow;
		}
	</style>
</head>

<body>
	<div id="app">
		<router-view></router-view>
		<div>
			<!--测试用例1-->
			<batman-active-panel :visible.sync="visible1" style="background: #eaeaea">
				<button @click="visible1=false">关闭面板-1</button>
				<test-component :user="user"></test-component>
				<test-component>
					{{user.firstName}}.{{user.lastName}}
				</test-component>
				<a href="#/second">to second</a>
			</batman-active-panel>
			<button @click="visible1=true">打开面板-1</button>

			<!---测试用例2 测试嵌套-->
			<batman-active-panel :visible.sync="visible2" style="background: #eaeaea">
				<div>
					<h2>测试嵌套第一层</h2>
					<button @click="visible3=true">打开第二次(嵌套模板)</button>
					<batman-active-panel :visible.sync="visible3" style="background: #eaeaea">
						<h2>测试嵌套第二层</h2>
						<p>然后请按浏览器后退键 正常情况下，会返回第一层</p>
						<strong>重点测试微信浏览器</strong>
						<button @click="visible3=false">手动关闭第二次(嵌套模板)</button>
					</batman-active-panel>
				</div>
			</batman-active-panel>
			<button @click="visible2=true">打开面板-2(嵌套模板)</button>

			<!---测试用例3 测试不关闭面板-->
			<batman-active-panel :visible.sync="visible4" style="background: #eaeaea">
				<div>
					<h2>测试回退不关闭面板-缓存模板-</h2>
					<button @click="visible5=true">手动Open面板-5(测试回退不关闭面板)</button>
					
					<batman-active-panel :visible.sync="visible5" 
										 style="background: #eaeaea" 
										 :history-back="visible5HistoryBack">
						<h2>测试回退不关闭面板</h2>
						<button @click="visible5=false">手动关闭面板-5(测试回退不关闭面板)</button>
					</batman-active-panel>
				</div>
			</batman-active-panel>
			<button @click="visible4=true">打开面板-4(测试回退不关闭面板) {{visible4}}</button>
		</div>
	</div>
</body>
<script src="./dist/vendor.build.js"></script>
<script src="./dist/build.js"></script>

</html>